<template>
<view class="container">
  <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  <view class="panel">
    <view class="list-item flex-between mt-20" v-if="resData.invoiceQrCodePath" @click="openQrCode">
      <view class="label">电子发票</view>
      <view class="detail text-gray">
        <text>查看</text>
        <uni-icons class="icons" type="forward" size="18" color="9D9D9D"></uni-icons>
      </view>
    </view>
    <view class="list-item flex-between" v-for="(item,index) in pageLabels" :class="{'mt-20':index === 0}" :key="item.value">
      <view class="label text-gray">{{item.label}}</view>
      <view class="val" v-if="!item.isCustom">{{resData[item.value]}}</view>
      <view class="val" v-else><text class="price">{{resData[item.value]}}</text>元</view>
    </view>
    <view class="list-item flex-between mt-20" @click="openOrderList">
      <view class="label">1张发票，含{{resData.orderIds.split(',').length}}个订单</view>
      <view class="detail text-gray">
        <text>查看</text>
        <uni-icons class="icons" type="forward" size="18" color="9D9D9D"></uni-icons>
      </view>
    </view>
    <view class="list-item flex-between mt-20">
      <view class="label text-gray">电子邮箱</view>
      <view class="val">{{resData.takerEmail}}</view>
    </view>
    <view class="confirm-btn" v-if="resData.applyState === 1 && resData.applyType === 1" @click="onRepeal">申请作废</view>
  </view>
  <uni-popup ref="invoiceCode">
    <view class="popup-panel">
      <image :src="'data:image/*;base64,' + resData.invoiceQrCode"></image>
    </view>
  </uni-popup>
  <uni-popup ref="orderRef">
    <view class="order-panel">
      <scroll-view scroll-y>
        <view class="list-panel" v-if="orderList.length > 0">
          <view v-for="(item,i) in orderList" :key="i">
            <label class="list-item">
              <view>
                <p class="time">{{item.paidTime}}</p>
                <p class="name">{{item.stationName}}</p>
              </view>
              <view class="price">
                <text>{{item.invoiceAmount}}</text>元
              </view>
            </label>
          </view>
        </view>
        <view v-else></view>
      </scroll-view>
    </view>
  </uni-popup>
</view>
</template>

<script>

import mvBar from "@/components/mysNavBar.vue";
import {invoiceDetail, invoiceDetailOrderList, repealApply} from "@/api";
export default {
  name: "index",
  components: {mvBar},
  data(){
    return{
      id: '',
      resData: '',
      orderList: [],
      statusMap:{
        1: '开票中',
        2: '已开票',
        3: '开票未通过',
        4: '已作废',
        5: '作废未通过'
      },
      pageLabels:[
        {label: '购方名称', value: 'buyerName'},
        {label: '购方税号', value: 'buyerTaxpayerNum'},
        {label: '发票金额', value: 'invoiceAmount', isCustom: true},
        {label: '申请时间', value: 'applyTime'},
        {label: '公司地址', value: 'buyerAddress'},
        {label: '公司电话', value: 'buyerTel'},
        {label: '公司开户行', value: 'buyerBankName'},
        {label: '开户行账号', value: 'buyerBankAccount'},
        {label: '备注', value: 'remark'},
      ],
      mysNavConfig: {
        navPadding: true,
        isHome: false,
        navFixed: true,
        bgColor:'#FFFFFF',
        navTitle: {
          text: "发票详情",
          color: "#1B1B1B",
          fontSize: "34upx", // px upx rpx
          fontWeight: "500", // blod
        },
        leftIconPath: '/static/header/back-b.png'
      },
    }
  },
  onLoad(options){
    this.id = options.id
    this.getData()
    this.getList()
  },
  methods:{
    async getData() {
      const params = { applyId:this.id }
      const res = await invoiceDetail({...params})
      this.resData = res
    },
    async getList() {
      const params = { applyId:this.id, pageNum: 1, pageSize: 999 }
      const res = await invoiceDetailOrderList({...params})
      this.orderList = res.rows
      console.log(this.orderList)
    },
    openQrCode(){
      this.$refs.invoiceCode.open('center')
    },
    openOrderList(){
      this.$refs.orderRef.open('bottom')
    },
    async onRepeal() {
      const params = {applyId: this.id}
      const res = await repealApply({...params})
      if (res.code === 200) {
        uni.showToast({
          title: '申请成功',
          icon: 'success'
        })
        await this.getData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  color: #1B1B1B;
  .mt-20{
    margin-top: 20upx;
  }
  .flex-between{
    display: flex;
    justify-content: space-between;
  }
  .flex-center{
    display: flex;
    justify-content: space-between;
  }
  .align-center{
    display: flex;
    align-items: center;
  }
  .text-gray{
    color: #9D9D9D;
  }
  .confirm-btn{
    position: fixed;
    left: 50%;
    bottom: 80upx;
    width: 700upx;
    line-height: 80upx;
    background: #006241;
    border-radius: 60upx;
    color: #FFFFFF;
    text-align: center;
    transform: translateX(-50%);
  }
  .order-panel{
    border-radius: 24upx 24upx 0 0;
    background: #F7F7F7;
    height: 800upx;
    //padding: 32upx;
    .list-panel{
      padding: 40upx 20upx;
      .list-item{
        box-sizing: border-box;
        width: 100%;
        border-radius: 24upx;
        background: #FFF;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 24upx 32upx;
        margin-bottom: 20upx;
        position: relative;
        .time,.address{
          color: #6A6A6A;
          font-size: 24upx;
        }
        .address{
          margin-top: 8upx;
        }
        .radio{
          margin-right: 20upx;
        }
        .price{
          position: absolute;
          right: 32upx;
          text{
            font-size: 44upx;
            font-weight: 700;
          }
        }
      }
    }
  }
  .popup-panel{
    width: 500upx;
    height: 500upx;
    border-radius: 32upx;
    background: #FFFFFF;
    padding: 32upx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .panel{
    .list-item{
      //&:nth-child(2){
      //  margin-top: 20upx;
      //}
      box-sizing: border-box;
      background: #FFFFFF;
      padding: 0 32upx;
      font-size: 28upx;
      line-height: 90upx;
      .detail{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text{
          font-size: 28upx;
          margin-right: 12upx;
        }
        .icons{
          line-height: 90upx;
        }
      }
      .val{
        .price{
          font-size: 32upx;
          color: #F57546;
          margin-right: 16upx;
        }
      }
    }
  }
}
</style>